<template>
  <a-drawer width="70%" closable placement="right" :visible="visible" @close="visible = false">
    <div slot="title" class="g-flex g-y-center">
      <div style="color: #000000;font-weight: bold;">{{titleName}}</div>
      <div style="font-size: 12px;margin-left: 20px;color: #333333;">日期：{{ row_record.rpDate }}</div>
    </div>
    <a-spin :spinning="spinning" class="table-padding-style" style="padding-top: 0">
      <a-table
        :columns="innerColumns"
        :data-source="dataList"
        :rowKey="(record, index) => index"
        :pagination="pagination"
        :bordered="true"
        @change="tableHandleChange"
        :loading="tableLoading"
      >
        <!--序号-->
        <template slot="footer" >
          合计： {{total}}
        </template>
      </a-table>
    </a-spin>
  </a-drawer>
</template>

<script>
import {
  getReportFormDeptList,
  getReportFormReportList,
  paymentMethodReportsDetail,
} from '@/api/modular/main/customer/cashier'

export default {
  data() {
    return {
      row_record:{},
      tableLoading:false,
      titleName:'报表明细',
      pagination: {
        pageNum: 1,
        pageSize: 20,
        current: 1,
        total: 20,
      },
      spinning: true,
      visible: false,
      form: this.$form.createForm(this),
      innerColumns: [
        { title: '渠道来源', align: 'center', dataIndex: 'channelName', width: 120, ellipsis: true, },
        { title: '金额', align: 'center', dataIndex: 'amt', width: 120, ellipsis: true, }
      ],
      lookImgVisible: false,
      dataList: [],
    }
  },
  computed:{
    total(){
      const Details = this.row_record.Details
      if(Details &&Details.length>0){
        return Details[Details.length-1].total
      }
      return ''
    }
  },
  methods: {
    // 合并
    rowSpan(key) {
      let arr = this.dataList
        .reduce((result, item) => {
          if (result.indexOf(item[key]) < 0) {
            result.push(item[key])
          }
          return result
        }, [])
        .reduce((result, keys) => {
          const children = this.dataList.filter((item) => item[key] === keys)
          result = result.concat(
            children.map((item, index) => ({
              ...item,
              [`${key}RowSpan`]: index === 0 ? children.length : 0,
            }))
          )
          return result
        }, [])
      this.dataList = arr
    },
    callback(key) {
      console.log(key)
    },
    handleCancel() {
      this.lookImgVisible = false
    },
    // 查看图片
    lookImg() {
      this.lookImgVisible = true
    },
    // 进入页面调
    show(record) {
      this.visible = true
      this.row_record=record
      const len = this.row_record.Details.length
      this.dataList = this.row_record.Details.slice(0,len-1)
      this.spinning=false
      console.log('record',record)
    },
    // 请求
    listFunc() {
      // 明细
      let sendData = {
        begin: this.row_record.days + ' 00:00:00',
        end: this.row_record.days + ' 23:59:59',
        execDept: this.row_record.execDept
      }
      let sendData2 = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
      }
      let sendData3 = {
        start: this.row_record.days + ' 00:00:00',
        end: this.row_record.days + ' 23:59:59',
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
      }

      // 日结总表
      if (this.row_record.type == 1) {
        this.titleName = '总报明细'
        getReportFormReportList(sendData, sendData2).then((result) => {
          this.dataList = [...result.rows]
          this.rowSpan('execDeptName')
          this.pagination.total = Number(result.total)
          this.tableLoading = false
        })
      } else if (this.row_record.type == 2) {
        // 项目科室
        this.titleName = '科室明细'
        getReportFormDeptList(sendData, sendData2).then((result) => {
          this.dataList = [...result.rows]
          this.rowSpan('execDeptName')
          this.pagination.total = Number(result.total)
          this.tableLoading = false
        })
      } else if (this.row_record.type == 3) {
        // 支付方式
        this.titleName = '支付方式明细'
        paymentMethodReportsDetail(sendData3).then((result) => {
          this.dataList = [...result.rows]
          this.rowSpan('execDeptName')
          this.pagination.total = Number(result.total)
          this.tableLoading = false
        })
      }
    },

    // 点击分页
    tableHandleChange(pagination) {
      console.log(pagination)
      this.pagination.pageNum = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.pagination.current = pagination.current
      this.listFunc()
    },

    findFunc(arr, type, typeNum) {
      let newData = arr.find((item) => {
        return item[`${type}`] == typeNum
      })
      if (newData != undefined) {
        return newData.url
      } else {
        return ''
      }
    },
  },
}
</script>

<style lang="less" scoped>
.ant-drawer-body {
  padding: 24px 0;
}
// .table-padding-style {
//   padding: 50px 24px;
//   border-bottom: 1px solid #e8e8e8;
// }
/deep/ .ant-table-thead > tr > th,
/deep/ .ant-table-tbody > tr > td {
  padding: 10px 16px !important;
}
/deep/ .ant-table-tbody > tr:last-child > td {
  // border-bottom: 0 !important;
}
/deep/ .ant-tabs-card-content {
  img {
    width: 100% !important;
  }
}
</style>

